<template>
  <div class="echarts-container">
    <div ref="echarts" class="echarts-content"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data() {
    return { };
  },
  mounted() {
    this.initEcharts();
  },
  methods: {
    initEcharts() {
      const myChart = echarts.init(this.$refs.echarts);
      const option = {
        title: {
          show: true,
          text: '身高体重',
          left:5,
          top:5
        },
        xAxis: {
          type: 'value',
          scale:true,
          // position:"top",// 坐标轴位置
        },
        yAxis: {
          type: 'value',
          scale:true,
          // position:"right",// 坐标轴位置
        },
        toolbox: {
          feature: {
            saveAsImage: {},
            dataView: {},
            restore: {},
            dataZoom: {}
          }
        },
        grid:{
          // show:true,
          // borderColor: 'red',
          // borderWidth: 5,
          top: "10%",
          left:"15%",
          left:"15%",
          left:"10%",
          containLabel:true, // 计算位置的时候，包含坐标系网格外面的文字 
        },
        dataZoom:{
          // type: "slider", //slider（默认）， inside 滑块位置
          // xAxisIndex:0, //值一般写0即可，表示放缩 x 轴
          // yAxisIndex:0,
          // start:50,  // 表示放缩 起始 的百分比
          // end:30,
        },
        series: [
          {
            type: 'effectScatter', // scatter 普通散点, effectScatter 有扩散效果(默认 render)
            showEffectOn: 'emphasis', // render 默认, emphasis 鼠标放上去显示神奇效果
            // markPoint: {
            //   data: [
            //     {
            //       type: 'max',
            //       name: '最大值'
            //     },
            //     {
            //       type: 'min',
            //       name: '最小值'
            //     }
            //   ]
            // },
            symbolSize:(arg)=>{
              // return 30
              let height = arg[0] / 100 // 米
              let weight = arg[1] //千克
              var bmi = weight/(height*height)
              if(bmi>28){
                return 20
              }
              return 10
            },
            itemStyle: {
              color:(arg)=>{
                // console.log(arg)
                let height = arg.value[0] / 100 // 米
                let weight = arg.value[1] //千克
                var bmi = weight/(height*height)
                if(bmi>28){
                  return 'red'
                }
                return "pink"
              }
            },
            data: [[175,92],[165,66],[155,62],[168,60],[166,50],[175,62],[165,62],[160,60], [165,82], [170,70], [175,72], [180,80], [190,100]],
          }
          // {} // 另一组散点。一般不会有多组散点
        ]
      }
      myChart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>

</style>
